<template>
  <div>
    <h1>计算属性</h1>
    <p>{{ reverseStr }}</p>
    <p>我的全名是:{{fullName}}</p>
    <el-button type="success" @click="changeMsg">改变字符串值</el-button>
  </div>
</template>

<script>
export default {
  name: "computed",
  data() {
    return {
      str: 'hello world',
      firstName:'小项',
      lastName:'同学',
    }
  },
  methods: {
    changeMsg(){
      this.str = 'new world 计算属性'
    }
  },
  computed:{
    // 返回倒序
    reverseStr(){
      return this.str.split('').reverse().join('')
    },
    // 全名
    fullName(){
      return this.firstName + this.lastName
    }
  },
}
</script>

<style scoped>

</style>
